<script>
import rightIcon from "./assets/right.svg"

export default {
  name: "index",
  data() {
    return {
      rightIcon,
    }
  },
  props: {
    check: Boolean,
  },
  methods: {
    handleClick() {
      this.$emit("update:check", !this.check)
    },
  },
  emits: ["update:check"],
}
</script>

<template>
  <view class="component" :class="{ active: check }" @click="handleClick">
    <image class="icon" v-if="check" :src="rightIcon"></image>
  </view>
</template>

<style scoped lang="scss">
.component {
  width: 34rpx;
  height: 34rpx;
  border-radius: 50%;
  border: 2rpx solid var(--border-color);
  &.active {
    background: var(--theme-color);
  }
  display: flex;
  align-items: center;
  justify-content: center;
  > .icon {
    width: 30rpx;
    height: 30rpx;
  }
}
</style>
